<template>
  <div>
    <!-- 导航栏 -->
    <div class="navbar">
      <div class="logo">茂行四海</div>
      <div class="nav-links">
        <a href="#">首页</a>
        <a href="#">头条资讯</a>
        <a href="#">需求发布</a>
        <a href="#">加入社群</a>
        <a href="#">活动报名</a>
        <a href="#">出海避坑</a>
      </div>
      <div class="auth-buttons">
        <button class="login">登录</button>
        <button class="register">注册</button>
      </div>
    </div>

    <!-- Banner 区域 -->

    <div class="first-box">
      <div class="banner">
        <h1>茂行四海</h1>
        <p>发现最新的出海机遇</p>
        <div class="search-type-ul">
          <ul>
            <li
                @click="searchType = index"
                v-for="(item,index) in searchTypeList" :key="index"
                :class="{'search-active':index === searchType}">{{ item.name }}</li>
          </ul>
        </div>
        <div class="search-box">
          <el-input
              v-model="input1"
              style="width: 100%"
              placeholder="请输入关键词"
              :suffix-icon="Search"
          />
        </div>
        <div class="search-type-ul bottom">
          <ul>
            <li
                @click="searchToolType = index"
                v-for="(item,index) in searchToolTypeList" :key="index"
                :class="{'search-tool-active':index === searchToolType}">{{ item.name }}</li>
          </ul>
        </div>
        <div class="date-box">
          <div class="year-text">2025年第<span class="red"> 8 </span>周，
            距离2026年还有<span class="red"> 8 </span>天</div>
          <div class="festival-text">
            <div v-for="(item,index) in festivalList" :key="index">
              距
              <span class="blue">{{ item.name }}</span>
              还有
              <span class="red">{{item.days}}</span>
              天
            </div>
          </div>
        </div>
        <div class="date-box">
          <div class="festival-text">
            <div v-for="(item,index) in countryList" :key="index" class="country-box">
              <div class="country-icon"> </div>
              <div>{{item.name}}</div>
              <div style="margin-left: 6px">{{item.days}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="bulletin">
        <div class="bulletin-title">全球快讯</div>
        <ul>
          <li v-for="(item,index) in bulletinList" :key="index">{{item.name}}</li>
        </ul>
      </div>
      <div class="ad-box">
        <el-carousel height="180px" indicator-position="outside">
          <el-carousel-item v-for="item in 4" :key="item">
            <img src="@/assets/images/ad1.png" alt=""  style="background-size: contain;height: 160px">
          </el-carousel-item>
        </el-carousel>

        <el-carousel height="180px" indicator-position="outside" style="margin-top: 20px">
          <el-carousel-item v-for="item in 4" :key="item">
            <img src="@/assets/images/ad2.png" alt="" style="background-size: contain;height: 160px">
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <!-- 内容区域 -->

    <div class="second-box">
      <div class="service-box" v-for="(item,index) in serviceList" :key="index">
        <div class="service-title">{{item.title}}</div>
        <ul class="service-list">
          <li v-for="(listItem,listIndex) in item.list" :key="listIndex" class="service-info">
           <div class="img"></div>
            <div class="text"> {{listItem.text}}</div>
          </li>
        </ul>
      </div>
    </div>
    <div class="third-box">
      <div class="public-title">交流社群</div>
      <div class="exchange-box">
        <div  v-for="(item,index) in 50" :key="index" class="exchange-info">
          <div class="icon"></div>
          <div class="text">伪美国交流群</div>
        </div>
      </div>
      <div class="search-type-ul">
        <ul>
          <li
              @click="LinkType = index"
              v-for="(item,index) in LinkTypeList" :key="index"
              :class="{'search-active':index === LinkType}">{{ item.name }}</li>
        </ul>
      </div>
      <ul class="site_tab_items" data-sdk-position="网址收藏-自定义网址">
        <li data-nav-id="2239786" data-sdk-index="0">
        <a href="https://www.zhihu.com/" target="blank" draggable="false" data-sdk-report="1" data-sdk-marked="1">
          <img src="https://img.amz123.com/upload/image_cloud/202404/1712472652340324_%E7%9F%A5%E4%B9%8Elogo.png" style="width: 24px;height:24px" draggable="false">
          <span class="_text_over_hidden_">知乎</span>
        </a>

      </li><li data-nav-id="2239788" data-sdk-index="1">
        <a href="https://weibo.com/newlogin?tabtype=weibo&amp;gid=102803&amp;openLoginLayer=0&amp;url=https%3A%2F%2Fweibo.com%2F" target="blank" draggable="false" data-sdk-report="1" data-sdk-marked="1">
          <img src="https://img.amz123.com/upload/image_cloud/202404/1712472857299391_%E5%BE%AE%E5%8D%9A.png" style="width: 24px;height:24px" draggable="false">
          <span class="_text_over_hidden_">微博</span>
        </a>

      </li><li data-nav-id="2239793" data-sdk-index="2">
        <a href="https://www.ziniao.com/?from=9688&amp;utm_source=9688 " target="blank" draggable="false" data-sdk-report="1" data-sdk-marked="1">
          <img src="https://img.amz123.com/upload/image_cloud/202411/1731381632365339_image.jpg" style="width: 24px;height:24px" draggable="false">
          <span class="_text_over_hidden_">紫鸟跨境浏览器</span>
        </a>

      </li><li data-nav-id="2239806" data-sdk-index="3">
        <a href="https://www.lingxing.com/?invite=Nramzzdy1" target="blank" draggable="false" data-sdk-report="1" data-sdk-marked="1">
          <img src="https://img.amz123.com/image_cloud/202212/1670483171578_微信图片_20221208150529.png" style="width: 24px;height:24px" draggable="false">
          <span class="_text_over_hidden_">领星-跨境ERP</span>
        </a>

      </li><li data-nav-id="2239807" data-sdk-index="4">
        <a href="https://ai.linkfox.com/?channel=mkt_ad_amz123_24_3" target="blank" draggable="false" data-sdk-report="1" data-sdk-marked="1">
          <img src="https://img.amz123.com/upload/image_cloud/202406/1718953008001130_313a1c6d3ab3508027822540c87d2467.jpg" style="width: 24px;height:24px" draggable="false">
          <span class="_text_over_hidden_">LinkFoxAI</span>
        </a>

      </li><li data-nav-id="2239813" data-sdk-index="5">
        <a href="https://www.amz123.com/anl" target="blank" draggable="false" data-sdk-report="1" data-sdk-marked="1">
          <img src="https://img.amz123.com/image_cloud/202307/1689931451547_美新物流1.png" style="width: 24px;height:24px" draggable="false">
          <span class="_text_over_hidden_">美线跨境-美新</span>
        </a>

      </li><li data-nav-id="2239820" data-sdk-index="6">
        <a href="https://www.amz123.com/ansu" target="blank" draggable="false" data-sdk-report="1" data-sdk-marked="1">
          <img src="https://img.amz123.com/upload/image_cloud/202412/1733387978861828_%E5%AE%89%E9%80%9F.png" style="width: 24px;height:24px" draggable="false">
          <span class="_text_over_hidden_">安速货运</span>
        </a>

      </li><li data-nav-id="2940534" data-sdk-index="7">
        <a href="https://www.amz123.com/hxlgs" target="blank" draggable="false" data-sdk-report="1" data-sdk-marked="1">
          <img src="https://img.amz123.com/upload/image_cloud/202502/1738916389541244_967b6e14cc02129c92b7af5f4449c96.png" style="width: 24px;height:24px" draggable="false">
          <span class="_text_over_hidden_">跨境物流海外仓</span>
        </a>

      </li></ul>
    </div>
    <div class="four-box">
      <div class="public-title">出海专区</div>
      <div class="to-sea-box">
        <div class="left-type">
          <div class="left-type-info" v-for="(item,index) in toSeaList" :key="index"
               :class="{'active':index === toSeaType}"  @click="toSeaType = index"
          >
            <div class="type-icon"></div>
            <div class="type-text">{{item.name}}</div>

          </div>
        </div>
        <div class="right-box">
          <ul class="check-ul">
            <li
                @click="countryNameType = index" :class="{'active':index === countryNameType}"
                v-for="(item,index) in countryNameList" :key="index">{{ item.name }}</li>
          </ul>
          <el-tabs type="border-card" class="tab-box">
            <el-tab-pane :label="item.name"
                         @click="tab1Type = index" :class="{'active':index === tab1Type}"
                         v-for="(item,index) in tab1List" :key="index">
              <div class="tool-box">
                <div class="tool-info"  @click="tab1DetailsType = index" :class="{'active':index === tab1DetailsType}"
                     v-for="(item,index) in tab1DetailsList" :key="index">
                 <div class="tool-icon"></div>
                 <div class="tool-text-box">
                   <div class="title">{{item.title}}</div>
                   <div class="text">{{item.text}}</div>
                 </div>
                </div>
              </div>

            </el-tab-pane>
          </el-tabs>
          <el-tabs type="border-card" class="tab-box">
            <el-tab-pane :label="item.name"
                         @click="tab1Type = index" :class="{'active':index === tab1Type}"
                         v-for="(item,index) in tab1List" :key="index">
              <div class="tool-box">
                <div class="tool-info"  @click="tab1DetailsType = index" :class="{'active':index === tab1DetailsType}"
                     v-for="(item,index) in tab1DetailsList" :key="index">
                  <div class="tool-icon"></div>
                  <div class="tool-text-box">
                    <div class="title">{{item.title}}</div>
                    <div class="text">{{item.text}}</div>
                  </div>
                </div>
              </div>

            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
<!--    <div class="content">-->
<!--      <div class="card">-->
<!--        <h2>AI 工具推荐</h2>-->
<!--        <p>精选最实用的 AI 工具，助你事半功倍</p>-->
<!--      </div>-->
<!--      <div class="card">-->
<!--        <h2>AI 学习资源</h2>-->
<!--        <p>从入门到精通，掌握 AI 的核心知识</p>-->
<!--      </div>-->
<!--      <div class="card">-->
<!--        <h2>AI 社区</h2>-->
<!--        <p>与全球 AI 爱好者交流，分享你的见解</p>-->
<!--      </div>-->
<!--    </div>-->
    <!-- 底部区域 -->
    <div class="footer">
      <p>&copy; 2023 AI-Bot. All rights reserved.</p>
    </div>
  </div>
</template>
<script setup>
import { Search } from '@element-plus/icons-vue'
// eslint-disable-next-line
import {ref, reactive, onMounted, computed} from "vue"

const input1 = ref(null)

const searchType = ref(0)
const searchTypeList = ref([
  {
    name:'出海行情',
  },{
    name:'出海服务',
  },{
    name:'出海推广',
  }
])

const searchToolType = ref(0)
const searchToolTypeList = ref([
  {
    name:'站内',
  },{
    name:'Bing',
  },{
    name:'百度',
  },{
    name:'Google',
  },{
    name:'Perplexity',
  },
])

const LinkType = ref(0)
const LinkTypeList = ref([
  {
    name:'自定义网址',
  },{
    name:'生活休闲',
  }
])


const toSeaType = ref(0)
const toSeaList = ref([
  {
    name:'个人出海',
  },{
    name:'组织出海',
  },{
    name:'品牌出海',
  },{
    name:'供应链出海',
  },{
    name:'线下出海',
  },{
    name:'线上出海',
  },{
    name:'服务出海',
  },{
    name:'文化出海',
  }
])

const countryNameType = ref(0)
const countryNameList = ref([
  {
    name:'全球',
  },{
    name:'美国',
  },{
    name:'日本',
  },{
    name:'新加坡',
  },{
    name:'韩国',
  },{
    name:'法国',
  },{
    name:'俄罗斯',
  },{
    name:'全球',
  },{
    name:'美国',
  },{
    name:'日本',
  },{
    name:'新加坡',
  },{
    name:'韩国',
  },{
    name:'法国',
  },{
    name:'俄罗斯',
  }
])


const tab1Type = ref(0)
const tab1List = ref([
  {
    name:'签证待办',
  },{
    name:'换算工具',
  },{
    name:'综合查询',
  },{
    name:'手机号码',
  },{
    name:'邮箱',
  },{
    name:'翻译',
  },{
    name:'上网环境',
  },{
    name:'海外求助',
  }
])

const tab1DetailsType = ref(0)
const tab1DetailsList = ref([
  {
    title:'amz知识大纲',
    text:'公司培训,新手必备',
  },{
    title:'amz知识大纲',
    text:'公司培训,新手必备',
  },{
    title:'amz知识大纲',
    text:'公司培训,新手必备',
  },{
    title:'amz知识大纲',
    text:'公司培训,新手必备',
  },{
    title:'amz知识大纲',
    text:'公司培训,新手必备',
  },{
    title:'amz知识大纲',
    text:'公司培训,新手必备',
  },{
    title:'amz知识大纲',
    text:'公司培训,新手必备',
  },{
    title:'amz知识大纲',
    text:'公司培训,新手必备',
  },  {
    title:'amz知识大纲',
    text:'公司培训,新手必备',
  },{
    title:'amz知识大纲',
    text:'公司培训,新手必备',
  },{
    title:'amz知识大纲',
    text:'公司培训,新手必备',
  },{
    title:'amz知识大纲',
    text:'公司培训,新手必备',
  },{
    title:'amz知识大纲',
    text:'公司培训,新手必备',
  },{
    title:'amz知识大纲',
    text:'公司培训,新手必备',
  },{
    title:'amz知识大纲',
    text:'公司培训,新手必备',
  },{
    title:'amz知识大纲',
    text:'公司培训,新手必备',
  }
])







const festivalList = ref([
  {
    name:'站内',
    days:'1'
  },{
    name:'网络星期一',
    days:'1'
  },{
    name:'圣诞节',
    days:'1'
  },{
    name:'春节',
    days:'1'
  },{
    name:'情人节',
    days:'1'
  },
])


const countryList = ref([
  {
    name:'北京',
    days:'02-17 22:29:28'
  },{
    name:'美东',
    days:'02-17 22:29:28'
  },{
    name:'美西',
    days:'02-17 22:29:28'
  },{
    name:'英国',
    days:'02-17 22:29:28'
  },{
    name:'欧洲',
    days:'02-17 22:29:28'
  },{
    name:'日本',
    days:'02-17 22:29:28'
  },
])

const serviceList = ref([
  {
    title:'招聘服务',
    list:[
      {
        image:'',
        text: '特朗普宣布退出伊朗核协议 奥巴马气炸：严重错误'
      },{
        image:'',
        text: '特朗普宣布退出伊朗核协议 奥巴马气炸：严重错误'
      },{
        image:'',
        text: '特朗普宣布退出伊朗核协议 奥巴马气炸：严重错误'
      }
    ]
  },{
    title:'业务销售',
    list:[
      {
        image:'',
        text: '特朗普宣布退出伊朗核协议 奥巴马气炸：严重错误'
      },{
        image:'',
        text: '特朗普宣布退出伊朗核协议 奥巴马气炸：严重错误'
      },{
        image:'',
        text: '特朗普宣布退出伊朗核协议 奥巴马气炸：严重错误'
      }
    ]
  },{
    title:'落地服务',
    list:[
      {
        image:'',
        text: '特朗普宣布退出伊朗核协议 奥巴马气炸：严重错误'
      },{
        image:'',
        text: '特朗普宣布退出伊朗核协议 奥巴马气炸：严重错误'
      },{
        image:'',
        text: '特朗普宣布退出伊朗核协议 奥巴马气炸：严重错误'
      }
    ]
  },{
    title:'本土货盘',
    list:[
      {
        image:'',
        text: '特朗普宣布退出伊朗核协议 奥巴马气炸：严重错误'
      },{
        image:'',
        text: '特朗普宣布退出伊朗核协议 奥巴马气炸：严重错误'
      },{
        image:'',
        text: '特朗普宣布退出伊朗核协议 奥巴马气炸：严重错误'
      }
    ]
  },{
    title:'国内活动',
    list:[
      {
        image:'',
        text: '特朗普宣布退出伊朗核协议 奥巴马气炸：严重错误'
      },{
        image:'',
        text: '特朗普宣布退出伊朗核协议 奥巴马气炸：严重错误'
      },{
        image:'',
        text: '特朗普宣布退出伊朗核协议 奥巴马气炸：严重错误'
      }
    ]
  },{
    title:'海外活动',
    list:[
      {
        image:'',
        text: '特朗普宣布退出伊朗核协议 奥巴马气炸：严重错误'
      },{
        image:'',
        text: '特朗普宣布退出伊朗核协议 奥巴马气炸：严重错误'
      },{
        image:'',
        text: '特朗普宣布退出伊朗核协议 奥巴马气炸：严重错误'
      }
    ]
  }
])

const bulletinList = ref([
    {
  name:'泰国迎宾小姐被指接待中国游客强',
},{
    name:'韩国人高呼很扎心：不吃不喝9年',

},{
    name:'男子花50万买7个"8"靓号被过户',

},{
    name:'两女房客将丽江一客栈房间变成了',

},{
    name:'这位大爷为何卖啥啥滞销？知道真',

},{
    name:'女子与丈夫吵架喝"百草枯"离家:喝',

},{
    name:'广东鳌江十家房屋被喷漆"涉毒家庭',

},{
    name:'中国游客在越南就餐被群殴 越方:责',
},

])

// import { watch } from 'vue';
// import { useRoute } from 'vue-router';
// import {useRouter} from "vue-router";
// import {useStore} from "vuex";
// import {ElMessage, ElMessageBox} from 'element-plus'
//
//
// // 监听当前路由路径的变化
// watch(
//     () => route,
//     (newRoute) => {
//
//       //mainMenuTitle = newPath
//     },
//     { deep: true, immediate: true }
// );
</script>

<style scoped>

</style>
